<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();"
            type="text/javascript"></script>
    <title>OpenCV.js Intro</title>
</head>
<body>
<h1>OpenCV.js Intro</h1>
<input type="file" id="fileInput" accept="image/*"/>
    <label for="clip">Clip:</label>
    <input type="range" id="clip" min="0" max="5" step="1" value="2" oninput="loadImage()" />
    <span id="clipValue">5</span>

    <label for="grid">Grid:</label>
    <input type="range" id="grid" min="0" max="40" step="1" value="6" oninput="loadImage()" />
    <span id="gridValue">40</span>
<canvas id="canvas"></canvas>

<script>
    let imgElement;
    let canvas;
    let ctx;
    let src;
    let dst;

    function onOpenCvReady() {
        document.getElementById('fileInput').disabled = false;
    }

    function loadImage() {
        const inputElement = document.getElementById('fileInput');
        imgElement = document.createElement('img');
        imgElement.src = URL.createObjectURL(inputElement.files[0]);
        imgElement.onload = () => {
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');
            canvas.width = imgElement.width;
            canvas.height = imgElement.height;
            ctx.drawImage(imgElement, 0, 0, imgElement.width, imgElement.height);

            // 转换图像为灰度
            src = cv.imread(canvas);
            cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY);

            // 显示处理后的图像
            cv.imshow(canvas, src);

            const clipValue = parseFloat(document.getElementById('clip').value);
            const gridValue = parseInt(document.getElementById('grid').value);
            const ada = new cv.CLAHE();
            ada.setClipLimit(clipValue);
            ada.setTilesGridSize(new cv.Size(gridValue + 1, gridValue + 1));

            ada.apply(src,src);

            cv.imshow('canvas', src);
        };
    }
</script>
</body>
</html>
